<template>
    <div class="centermap">
        <div class="maptitle">
            <div class="zuo"></div>
            <span class="titletext">{{ maptitle }}</span>
            <div class="you"></div>
        </div>
        <div class="quanguo refresh" @click="doRefresh()">刷新</div>
        <div class="mapwrap">
            <!-- <dv-border-box-13> 1160 1316  :style="{ width: mapWidth + 'px' }"-->
            <dv-border-box-12>
                <div
                    class="quanguo"
                    @click="getData('china')"
                    v-if="code !== 'china'"
                >
                    中国
                </div>
                <div
                    class="nogroup"
                    v-if="code == 'china' && noGroupData.totalCount > 0"
                >
                    <!-- <span>未划分</span>
          <p>总数：{{ noGroupData.totalCount || 0 }}</p>
          <p>在线：{{ noGroupData.onlineCount || 0 }}</p>
          <p>离线：{{ noGroupData.offlineCount || 0 }}</p>
          <p>告警：{{ noGroupData.alarmCount || 0 }}</p> -->
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        border
                        :cell-style="{ borderColor: '#00f7f6', color: '#fff',fontWeight:'bold' }"
                        :header-cell-style="{
                            borderColor: '#00f7f6',
                            color: '#fff',fontWeight:'bold'
                        }" size="mini"
                    >
                        <!-- 纵向表头 -->
                        <el-table-column width="53">
                            <template slot-scope="scope">
                                {{ scope.row.verticalHeader }}
                            </template>
                        </el-table-column>
                        <!-- 横向表头和数据列 -->
                        <el-table-column label="未划分" width="70"> 
                          <template slot-scope="scope">{{ scope.row.value1 }}</template>
                        </el-table-column>
                        <el-table-column label="已划分" width="70"> 
                          <template slot-scope="scope">{{ scope.row.value2 }}</template>
                        </el-table-column>
                        <el-table-column label="统计" width="53">
                          <template slot-scope="scope">{{ scope.row.value3 }}</template>
                        </el-table-column>
                    </el-table>
                </div>

                <Echart
                    id="CenterMap"
                    :options="options"
                    ref="CenterMap"
                    :style="{ width: '1360px' }"
                />
            </dv-border-box-12>
        </div>
    </div>
</template>

<script>
import xzqCode from "@/utils/map/xzqCode";
import * as echarts from "echarts";
import Echart from "@/components/echart/index.vue";

export default {
    components: {
        Echart,
    },
    data() {
        return {
            maptitle: "设备分布图",
            options: {},
            code: "china", //china 代表中国 其他地市是行政编码
            echartBindClick: false,
            isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
            warnData: {}, //告警数据

            noGroupData: {}, //未分组
            mapWidth: this.$store.state.app.sidebar.opened
                ? window.innerWidth - 260 - 600
                : window.innerWidth - 90 - 614,

            tableData: [
                {
                    verticalHeader: "在线",
                    value1: "",
                    value2: "",
                    value3: "",
                },
                {
                    verticalHeader: "离线",
                    value1: "",
                    value2: "",
                    value3: "",
                },
                {
                    verticalHeader: "告警",
                    value1: "",
                    value2: "",
                    value3: "",
                },
                {
                    verticalHeader: "总数",
                    value1: "",
                    value2: "",
                    value3: "",
                },
            ],
        };
    },
    created() {},
    computed: {
        sidebar() {
            return this.$store.state.app.sidebar;
        },
    },
    watch: {
        sidebar: {
            handler(options) {
                this.mapWidth = this.$store.state.app.sidebar.opened
                    ? window.innerWidth - 260 - 600
                    : window.innerWidth - 90 - 614;
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        this.getData("china");
    },
    methods: {
        async getData(code, ename) {
            this.$emit("getLoading", true);
            this.warnData = {};
            const datas = await this.$store
                .dispatch("generateMapWarn", {
                    code: code == "china" ? "" : code,
                })
                .finally(() => this.$emit("getLoading", false));

            if (datas) {
                this.warnData = datas;
                this.$emit("warnData", datas);
                let noGroup = datas.childrens.filter((p) => !p.regionCode);
                this.noGroupData = noGroup.length > 0 ? noGroup[0] : {};
                if(noGroup.length>0){
                  this.tableData[0].value1 = this.noGroupData.onlineCount;
                  this.tableData[1].value1 = this.noGroupData.offlineCount;
                  this.tableData[2].value1 = this.noGroupData.alarmCount;
                  this.tableData[3].value1 = this.noGroupData.totalCount;
                }
                if(datas){
                  this.tableData[0].value3 = this.warnData.onlineCount;
                  this.tableData[1].value3 = this.warnData.offlineCount;
                  this.tableData[2].value3 = this.warnData.alarmCount;
                  this.tableData[3].value3 = this.warnData.totalCount;

                  this.tableData[0].value2 = +this.warnData.onlineCount - (+this.noGroupData.onlineCount);
                  this.tableData[1].value2 = +this.warnData.offlineCount -(+this.noGroupData.offlineCount);
                  this.tableData[2].value2 = +this.warnData.alarmCount-(+this.noGroupData.alarmCount);
                  this.tableData[3].value2 = +this.warnData.totalCount-(+this.noGroupData.totalCount);
                }
                const arrList = {
                    市: "",
                    省: "",
                    自治区: "",
                    壮族自治区: "",
                    回族自治区: "",
                    维吾尔自治区: "",
                    特别行政区: "",
                };
                const pattern = new RegExp(Object.keys(arrList).join("|"), "g");
                const alarmList = datas.childrens.map((item) => {
                    return {
                        name:
                            code == "china" && item.regionName
                                ? item.regionName.replace(
                                      pattern,
                                      (match) => arrList[match]
                                  )
                                : item.regionName,
                        code: item.regionCode,
                        value: item.alarmCount || 0,
                        alarmCount: item.alarmCount || 0,
                        totalCount: item.totalCount || 0,
                        onlineCount: item.onlineCount || 0,
                        offlineCount: item.offlineCount || 0,
                    };
                });
                this.getGeojson(code, alarmList, ename);
                this.mapclick();
                return;
            }
            this.getGeojson(code, [], ename);
            this.mapclick();
        },

        /**
         * @description: 获取geojson
         * @param {*} name china 表示中国 其他省份行政区编码
         * @param {*} mydata 接口返回列表数据
         * @return {*}
         */
        async getGeojson(name, mydata, ename) {
            this.code = name;
            //如果要展示南海群岛并且展示的是中国的话
            let geoname = name;
            if (this.isSouthChinaSea && name == "china") {
                geoname = "chinaNanhai";
            }
            //如果有注册地图的话就不用再注册 了
            let mapjson = echarts.getMap(name);
            if (mapjson) {
                mapjson = mapjson.geoJson;
            } else {
                mapjson =
                    geoname == "china"
                        ? await require(`echarts/map/json/${geoname}.json`)
                        : await require(`echarts/map/json/province/${ename}.json`);
                echarts.registerMap(name, mapjson);
            }

            this.init(name, mydata);
        },

        init(name, data) {
            let top = 45;
            let zoom = 1.05;
            let option = {
                backgroundColor: "rgba(0,0,0,0)",
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false,
                    top: "middle",
                },
                visualMap: {
                    left: 20,
                    bottom: 20,
                    pieces: [
                        { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
                        { gte: 600, lte: 999, label: "600-999个" },
                        { gte: 200, lte: 599, label: "200-599个" },
                        { gte: 50, lte: 199, label: "49-199个" },
                        // { gte: 10, lte: 49, label: "10-49个" },
                        { lte: 49, label: "1-49个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
                    ],
                    inRange: {
                        // 渐变颜色，从小到大
                        color: [
                            "#79BCA9",
                            "#13BCA9",
                            "#0AAC81",
                            "#0A977E",
                            "#006D66",
                        ],
                    },
                    textStyle: {
                        color: "#fff",
                    },
                },
                geo: {
                    map: name,
                    roam: false,
                    selectedMode: false, //是否允许选中多个区域
                    zoom: zoom,
                    top: top,
                    // aspectScale: 0.78,
                    show: false,
                },
                series: [
                    {
                        name: "MAP",
                        type: "map",
                        map: name,
                        // aspectScale: 0.78,
                        data: data,
                        // data: [1,100],
                        selectedMode: false, //是否允许选中多个区域
                        zoom: zoom,
                        geoIndex: 1,
                        top: top,
                        tooltip: {
                            show: true,
                            trigger: "item",
                            extraCssText:
                                "max-width:200px; white-space:pre-wrap",
                            formatter: function (params) {
                                if (params.data) {
                                    let s = '<div style="padding:6px 10px">';
                                    s += params.name + " \n";
                                    s +=
                                        "总数：" +
                                        params.data.totalCount +
                                        "个\n";
                                    s +=
                                        "在线：" +
                                        params.data.onlineCount +
                                        "个\n";
                                    s +=
                                        "离线：" +
                                        params.data.offlineCount +
                                        "个\n";
                                    s +=
                                        "告警：" +
                                        params.data.alarmCount +
                                        "个\n</div>";
                                    return s;
                                } else {
                                    return params.name;
                                }
                            },
                            backgroundColor: "rgba(0,0,0,.6)",
                            borderColor: "rgba(147, 235, 248, .8)",
                            textStyle: {
                                color: "#FFF",
                            },
                        },
                        label: {
                            show: true,
                            color: "#ffffff",
                            // position: [-10, 0],
                            formatter: function (val) {
                                if (val.data !== undefined) {
                                    return val.name;
                                } else {
                                    return "";
                                }
                            },
                            rich: {},
                        },
                        emphasis: {
                            label: {
                                show: false,
                                textStyle: {
                                    color: "#fff", //鼠标经过字体颜色
                                },
                            },
                            itemStyle: {
                                areaColor: "#66a9c9",
                                borderWidth: 1,
                            },
                        },
                        itemStyle: {
                            borderColor: "rgba(147, 235, 248, .8)",
                            borderWidth: 1,
                            areaColor: {
                                type: "radial",
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 235, 248, .3)", // 100% 处的颜色
                                    },
                                ],
                                globalCoord: false, // 缺为 false
                            },
                            shadowColor: "rgba(128, 217, 248, .3)",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                        },
                    },
                ],
                //动画效果
                // animationDuration: 1000,
                // animationEasing: 'linear',
                // animationDurationUpdate: 1000
            };
            this.options = option;
            window.addEventListener("resize", () => {
                if (this.$refs.CenterMap && this.$refs.CenterMap.chart) {
                    this.$refs.CenterMap.chart.resize();
                }
            });
            this.$refs.CenterMap.chart.on("mousemove", (params) => {
                const notdatas = {
                    totalCount: 0,
                    onlineCount: 0,
                    offlineCount: 0,
                    alarmCount: 0,
                };
                if (params.data) {
                    this.$store.dispatch("generateMapWarn", {
                        code: "",
                        map: params.data,
                    });
                } else {
                    this.$store.dispatch("generateMapWarn", {
                        code: "",
                        map: notdatas,
                    });
                }
            });
            this.$refs.CenterMap.chart.on("mouseout", (params) => {
                this.$store.dispatch("generateMapWarn", {
                    code: "",
                    map: this.warnData,
                });
            });
        },

        mapclick() {
            if (this.echartBindClick) return;
            //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
            this.$refs.CenterMap.chart.on("click", (params) => {
                let xzqData = xzqCode[params.name];
                if (params.data && xzqData) {
                    this.getData(params.data.code, xzqData.ename);
                    this.$emit("getCode", params.data.code);
                }
            });
            this.echartBindClick = true;
        },
        // 刷新
        doRefresh() {
            this.getData(this.code);
            this.$emit("getCode", this.code);
        },
    },
};
</script>
<style lang="scss" scoped>
.centermap {
    .maptitle {
        height: 40px;
        display: flex;
        justify-content: center;
        box-sizing: border-box;

        .titletext {
            font-size: 1.6rem;
            font-weight: 900;
            letter-spacing: 6px;
            background: linear-gradient(
                92deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0 10px;
        }

        .zuo,
        .you {
            background-size: 100% 100%;
            width: 29px;
            height: 20px;
            margin-top: 8px;
        }

        .zuo {
            background: url("~@/assets/img/xiezuo.png") no-repeat;
        }

        .you {
            background: url("~@/assets/img/xieyou.png") no-repeat;
        }
    }

    .mapwrap {
        height: 868px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .quanguo {
        position: absolute;
        right: 30px;
        top: -46px;
        width: 80px;
        height: 28px;
        border: 1px solid #00eded;
        border-radius: 10px;
        color: #00f7f6;
        text-align: center;
        line-height: 26px;
        letter-spacing: 6px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
            0 0 6px rgba(0, 237, 237, 0.4);
    }

    .nogroup {
        color: #ffffff;
        position: absolute;
        left: 6px;
        top: 8px;
        
        ::v-deep .el-table {
            font-size: .9rem;
            border: 1px solid #00eded;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
                0 0 6px rgba(0, 237, 237, 0.4);
            background-color: transparent;
            tr,
            th.el-table__cell {
                background-color: transparent;
            }
        }
    }

    .refresh {
        top: 9.9%;
    }
}
</style>
